import React, { useState } from "react";
import { View } from "react-native";
import EmailCodeLoginComponent from "./EmailCodeLogin/index";
import EmailPasswordLoginComponent from "./EmailPasswordLogin/index";
import { useTheme } from "@/contexts/ThemeContext";
import AlertService from "@/components/Global/Alert/service";

// 导入通用组件
import Divider from "./components/Divider";
import LoginMethodToggle, { LoginMethod } from "./components/LoginMethodToggle";

export default function LoginPage() {
  const { colors } = useTheme();
  // 登录方式
  const [loginMethod, setLoginMethod] = useState<LoginMethod>(
    LoginMethod.EMAIL_PASSWORD
  );

  // 切换登录方式
  const toggleLoginMethod = () => {
    setLoginMethod((prev) =>
      prev === LoginMethod.EMAIL_CODE
        ? LoginMethod.EMAIL_PASSWORD
        : LoginMethod.EMAIL_CODE
    );
  };

  // 渲染登录页面组件
  const renderLoginComponent = () => {
    const alertHandler = (type, message) =>
      AlertService.showAlert(type, message);
    switch (loginMethod) {
      case LoginMethod.EMAIL_CODE:
        return <EmailCodeLoginComponent showAlert={alertHandler} />;
      case LoginMethod.EMAIL_PASSWORD:
      default:
        return <EmailPasswordLoginComponent showAlert={alertHandler} />;
    }
  };

  // 渲染底部其他登录选项
  const renderFooter = () => {
    return (
      <View style={{ alignItems: "center", marginVertical: 20 }}>
        <Divider text="其它登陆选项" />
        <View
          style={{
            marginTop: 20,
            justifyContent: "space-between",
            flexDirection: "row",
          }}
        >
          <LoginMethodToggle
            currentMethod={loginMethod}
            onToggle={toggleLoginMethod}
          />
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      {renderLoginComponent()}
      {renderFooter()}
    </View>
  );
}
